<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="表名：">
					<el-input v-model="state.queryParams.table_name" placeholder="请输入表名" class="w-[200px]"> </el-input>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15 mr15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="layout-table-card" shadow="never">
			<el-button size="default" v-auth="'sys/code/import'" type="primary" class="mb-4" @click="handleImport()"> 导入数据表 </el-button>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column prop="id" label="ID" width="60" />
				<el-table-column prop="table_name" label="表名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="table_comment" label="表描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="update_time" label="修改时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="{ row }">
						<div class="flex">
							<el-button text type="primary" v-auth="'sys/code/preview'" @click="handlePreview(row)">预览</el-button>
							<el-button text type="primary" v-auth="'sys/code/edit'" @click="handleEdit(row)">编辑</el-button>
							<el-dropdown class="ml-[15px]" @command="handleCommand($event, row)">
								<el-button text type="primary">
									更多
									<SvgIcon name="ele-ArrowDown" size="30" />
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<div v-auth="'sys/code/generate'">
											<el-dropdown-item command="generate">
												<el-button link type="primary"> 生成代码 </el-button>
											</el-dropdown-item>
										</div>
										<div v-auth="'sys/code/sysnc'">
											<el-dropdown-item command="sync">
												<el-button link type="primary"> 同步 </el-button>
											</el-dropdown-item>
										</div>
										<div v-auth="'sys/code/delete'">
											<el-dropdown-item command="delete">
												<el-button link type="danger"> 删除 </el-button>
											</el-dropdown-item>
										</div>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="state" @tableChange="getTableList" />
			</div>
		</el-card>
		<ImportDialog v-if="showImportDialog" ref="importRef" @submit="getTableList" @close="showImportDialog = false" />
		<EditDialog v-if="showEditDialog" ref="editRef" @submit="getTableList" @close="showEditDialog = false" />
	</div>
	<codePreview v-if="previewData.show" v-model="previewData.show" :code="previewData.code" />
</template>

<script setup lang="ts" name="codeIndex">
import { reactive, onMounted, ref, nextTick } from 'vue';
import { usePage } from '/@/hooks/usePage';
import { messageSuccess, messageBox } from '/@/utils/message';
import { downloadExport } from '/@/api/download';
import { codeLists, codePreviewInfo, codeSync, codeGenerate, codeDelete } from '/@/api/crud/code';
import ImportDialog from '/@/views/sys/code/component/import.vue';
import EditDialog from '/@/views/sys/code/component/edit.vue';

const importRef = ref();

const showImportDialog = ref(false);

const editRef = ref();

const showEditDialog = ref(false);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		table_name: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const previewData = reactive({
	show: false,
	code: [],
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: codeLists });

// 导入数据表
const handleImport = async () => {
	showImportDialog.value = true;
	nextTick(() => {
		importRef.value?.open();
	});
};

// 编辑
const handleEdit = async (row: any) => {
	showEditDialog.value = true;
	nextTick(() => {
		editRef.value?.setFormData(row, () => {
			editRef.value?.open();
		});
	});
};

// 生成代码
const handleGenerate = async(row: any) => {
	const res = await codeGenerate({id: [row.id]});
	messageSuccess('生成代码成功');
	// 导出压缩包
	if(res.crud_type == 1) {
		downloadExport({ file_key: res.file_key, file_name: res.file_name });
	}
};

// 同步表结构
const handleSync = async(row: any) => {
	messageBox(`同步后数据会被覆盖，确定要同步吗？`).then(async () => {
		await codeSync({id: row.id});
		messageSuccess('同步成功');
		getTableList();
	});
};

// 删除
const handleDelete = async(id: number) => {
	messageBox(`确定要删除吗？`).then(async () => {
		await codeDelete({id: id});
		messageSuccess('删除成功');
		getTableList();
	});
};

// 预览
const handlePreview = async(row: any) => {
	const res = await codePreviewInfo({id: row.id});
	previewData.code = res;
	previewData.show = true;
};

// 下拉框
const handleCommand = (command: any, row: any) => {
	switch (command) {
		case 'generate':
			handleGenerate(row);
			break;
		case 'sync':
			handleSync(row);
			break;
		case 'delete':
			handleDelete(row.id);
	}
};

onMounted(() => {
	getTableList();
});
</script>

<style scoped lang="scss"></style>
